<template>
  <div ref="container">
    <breadcrumb :breadList="breadList" :name="name">
      <div class="handle-box" slot="handleContent">
        <div class="handle-btn">
          <a-button class="common-btn" @click="go_toOperation('create', '')">新增工单</a-button>
        </div>
        <div class="handle-btn">
          <a-button class="common-btn" @click="exportList">导出列表</a-button>
        </div>
      </div>
    </breadcrumb>
    <a-card>
      <a-form @submit="handleSubmit" :form="form">
        <a-row clss="form-row" :gutter="16" style="margin-bottom:10px;">
          <a-col :lg="6" :md="12" :sm="24">
            <div style="text-align: center;">
              <a-icon type="folder-open" class="order-tag" />
              <span class="order-num">30</span>
            </div>
            <p class="order-dec">工单总数</p>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24">
            <div style="text-align: center;">
              <a-icon type="bulb" class="order-tag" />
              <span class="order-num">5</span>
            </div>
            <p class="order-dec">紧急工单</p>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24">
            <div style="text-align: center;">
              <a-icon type="tool" class="order-tag" />
              <span class="order-num">20</span>
            </div>
            <p class="order-dec">维修中</p>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24">
            <div style="text-align: center;">
              <a-icon type="robot" class="order-tag" />
              <span class="order-num">10</span>
            </div>
            <p class="order-dec">待派单</p>
          </a-col>
        </a-row>
        <a-row clss="form-row" :gutter="16">
          <a-col :lg="10" :md="12" :sm="24">
            <a-form-item label="工单号" :labelCol="{lg: {span: 6}, sm: {span: 7}}" :wrapperCol="{lg: {span: 14}, sm: {span: 17} }">
              <a-input v-model="queryParam.proItem" placeholder="工单号" style="width:270px;" />
            </a-form-item>
          </a-col>
          <a-col :lg="10" :md="12" :sm="24">
            <a-form-item label="工单状态" :labelCol="{lg: {span: 6}, sm: {span: 7}}" :wrapperCol="{lg: {span: 14}, sm: {span: 17} }">
              <a-select v-decorator="['queryParam.eara', {initialValue: '1', rules: [{required: false, message: ''}]}]" style="width: 270px;">
                <a-select-option value="1">未派单</a-select-option>
                <a-select-option value="2">维修中</a-select-option>
                <a-select-option value="3">已完成</a-select-option>
                <a-select-option value="4">已作废</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="2" :md="12" :sm="24">
            <a-form-item label :colon="false">
              <a-button class="common-btn" @click="toSearch('2')">查询</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
    <a-card>
      <a-table :columns="columns" :dataSource="loadData" bordered :loading="loading" :pagination="false">
        <template slot="operation" slot-scope="text, record">
          <p style="display:inline" @click="$refs.dispatchModel.add(record)">
            <a href="javascript:;">人工派单</a>
            <a-divider type="vertical" />
          </p>
          <p style="display:inline" @click="go_toOperation('detail',record)">
            <a href="javascript:;">详情</a>
            <a-divider type="vertical" />
          </p>
          <p style="display:inline" @click="go_toOperation('modify',record)">
            <a href="javascript:;">编辑</a>
            <a-divider type="vertical" />
          </p>
          <p style="display:inline" @click="toRepair(record)">
            <a href="javascript:;">作废</a>
          </p>
        </template>
      </a-table>
      <dispatch-model ref="dispatchModel" @closeModel="closeModel"></dispatch-model>
    </a-card>
  </div>
</template>

<script>
import Breadcrumb from '@/components/tools/Breadcrumb'
import DispatchModel from './dispatchModel'
// import { getSupplierList } from '@/api/mockdata'
export default {
  name: 'AlarmUserQuery',
  components: {
    Breadcrumb,
    DispatchModel
  },
  data() {
    return {
      name: '',
      breadList: [],
      loading: false,
      form: this.$form.createForm(this),
      // 查询参数
      queryParam: {},
      // 表头
      columns: [
        {
          title: '工单号',
          width: '10%',
          dataIndex: 'orderNumber'
        },
        {
          title: '用户姓名',
          width: '10%',
          dataIndex: 'userName'
        },
        {
          title: '联系人',
          width: '10%',
          dataIndex: 'userConnect'
        },
        {
          title: '联系电话',
          width: '10%',
          dataIndex: 'userTelephone'
        },
        {
          title: '维修公司',
          width: '10%',
          dataIndex: 'repairCompany'
        },
        {
          title: '维修人员',
          width: '10%',
          dataIndex: 'repairPerson'
        },
        {
          title: '工单状态',
          width: '10%',
          dataIndex: 'orderStatus'
        },
        {
          title: '维修时间',
          width: '10%',
          dataIndex: 'repairTime'
        },
        {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: []
    }
  },
  created() {
    this.loading = true
    this.getBreadCrumb()
    setTimeout(() => {
      this.getData('1')
    }, 1000)
  },
  methods: {
    // 面包屑处理
    getBreadCrumb() {
      this.breadList = []
      this.name = this.$route.name
      this.$route.matched.forEach(item => {
        console.log('1111', item)
        this.breadList.push(item)
      })
    },
    getData(code) {
      const data = [
        {
          orderNumber: 'ABBBB-CC',
          userName: '三三二',
          userConnect: '郭靖',
          userTelephone: '13909987366',
          repairCompany: '三把起子',
          repairPerson: '闪电1号',
          orderStatus: '维修中',
          repairTime: '2020/1/26'
        },
        {
          orderNumber: 'ABBBB-CC',
          userName: '三三二',
          userConnect: '郭靖',
          userTelephone: '13909987366',
          repairCompany: '三把起子',
          repairPerson: '闪电1号',
          orderStatus: '维修中',
          repairTime: '2020/1/26'
        },
        {
          orderNumber: 'ABBBB-CC',
          userName: '三三二',
          userConnect: '郭靖',
          userTelephone: '13909987366',
          repairCompany: '三把起子',
          repairPerson: '闪电1号',
          orderStatus: '维修中',
          repairTime: '2020/1/26'
        },
        {
          orderNumber: 'ABBBB-CC',
          userName: '三三二',
          userConnect: '郭靖',
          userTelephone: '13909987366',
          repairCompany: '三把起子',
          repairPerson: '闪电1号',
          orderStatus: '维修中',
          repairTime: '2020/1/26'
        },
        {
          orderNumber: 'ABBBB-CC',
          userName: '三三二',
          userConnect: '郭靖',
          userTelephone: '13909987366',
          repairCompany: '三把起子',
          repairPerson: '闪电1号',
          orderStatus: '维修中',
          repairTime: '2020/1/26'
        },
        {
          orderNumber: 'ABBBB-CC',
          userName: '三三二',
          userConnect: '郭靖',
          userTelephone: '13909987366',
          repairCompany: '三把起子',
          repairPerson: '闪电1号',
          orderStatus: '维修中',
          repairTime: '2020/1/26'
        }
      ]
      if (code === '1') {
        this.loadData = data
        setTimeout(() => {
          this.loading = false
        }, 1000)
      } else {
        this.loadData = data
        setTimeout(() => {
          this.loading = false
          this.$success({
            title: '查询成功'
          })
        }, 1000)
      }
    },
    exportList() {
      this.$success({
        title: '导出成功'
      })
    },
    toSearch(status) {
      this.loading = true
      this.getData(status)
    },
    handleSubmit() {
      console.log('ttt')
    },
    toRepair() {
      this.$success({
        title: '当前工单已作废'
      })
    },
    go_toOperation(type, record) {
      console.log('========', record)
      this.$router.push({
        name: 'addOrder',
        query: {
          type: type,
          proDetails: JSON.stringify(record)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.order-tag {
  font-size: 48px;
  font-weight: 700;
  color: #000;
}
.order-num {
  font-size: 36px;
  font-weight: 700;
  margin-left: 5px;
  color: #000;
}
.order-dec {
  text-align: center;
  font-size: 16px;
}
</style>
